<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.1.1/echarts.common.js"></script> -->
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.1.1/echarts.common.js"></script>
    <title>运动图表</title>
</head>

<body>
    <div class="app_sportsData dpflex fdcolumn">

        <!-- 数据总览 -->
        <div class="allData flex1">
            <!-- 图标 -->
            <div><i class="iconfont icon-vprev fff" id="goBack"></i></div>

            <!-- 头像 -->
            <div class="mySporst dpflex jcs aic fff">
                <p class="f20">我的运动数据</p>
                <div><img src="../imgs/cat.jpg" alt="" class="userImg"></div>
            </div>

            <!-- 运动数据 -->
            <div class="sporstData dpflex jcs">
                <!-- 总运动 -->
                <div class="allSporst dpflex fdcolumn flex1 fff">
                    <p class="comText">总运动</p>
                    <p class="f16"><span class="allSporstTime f40">00</span>分钟</p>
                </div>
                <!-- 本周消耗 -->
                <div class="weekConsume dpflex fdcolumn flex1 fff">
                    <p class="comText">本周消耗</p>
                    <p class="f16"><span class="allConsume f40">00</span>千卡</p>
                </div>
            </div>

            <!-- 运动时间 -->
            <div class="sporstTime dpflex fff">
                <div class="consume">
                    <p class="comText">消耗(千卡)</p>
                    <p class="consumeText">000</p>
                </div>
                <div class="addUp">
                    <p class="comText">累计(天)</p>
                    <p class="addupText">000</p>
                </div>
                <div class="continuous">
                    <p class="comText">连续(天)</p>
                    <p class="continuousText">000</p>
                </div>
            </div>
        </div>
        <!-- 柱状图 -->
        <div class="bar flex1"></div>

        <!-- 饼状图 -->
        <div class="pie flex1"></div>

    </div>

</body>

</html>